<template>
	<view class="wdthdrawal">
		<view class="pagetitle">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="right">
				<view class="select">
					<uni-data-select v-model="selectTimeVal" :localdata="range" @change="changeDateSelect"></uni-data-select>
				</view>

				<view class="" style="display: flex;width:400px;">
					<uni-easyinput errorMessage v-model="searchVal" focus placeholder="搜索内容(可搜:_id)"></uni-easyinput>
					<button @click="eventSearch" size="mini" plain style="margin:5rpx 10rpx;">搜索</button>
				</view>
			</view>
		</view>
		<view class="warn">
			<text>
				<text>{{range[selectTimeVal].text}}新增用户：</text>
			</text>
			<text style="color:#ff6600;font-weight:bold">{{total}}</text>
		</view>
		<view class="table">
			<uni-table ref="table" :loading="loading" :emptyText="data.length || '暂无更多数据'" border stripe type="selection"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th align="center">头像</uni-th>
					<uni-th align="center">昵称</uni-th>
					<uni-th align="center">手机号</uni-th>
					<uni-th align="center">软件名称</uni-th>
					<uni-th align="center">注册平台</uni-th>
					<uni-th align="center">注册IP</uni-th>
					<uni-th align="center">账号状态</uni-th>
					<uni-th align="center">平台版本</uni-th>
					<uni-th align="center">手机系统</uni-th>
					<uni-th align="center">收货地址</uni-th>
					<uni-th align="center">金额</uni-th>
					<uni-th align="center">时间</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in data" :key="index">
					<!-- 头像 -->
					<uni-td align="center">
						<image v-if="item.avatar" @click="eventImage(item.avatar)" :src="item.avatar+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix"
							style="width:70rpx;height:70rpx;border-radius:5px"></image>
					</uni-td>
					<!-- 名称 -->
					<uni-td align="center">
						<text class="titleApp">
							{{item.nickname?item.nickname:''}}
						</text>
					</uni-td>
					<!-- 手机号 -->
					<uni-td align="center">
						{{item.mobile?item.mobile:''}}
					</uni-td>
					<!-- 平台 -->
					<uni-td align="center">
						<view class="" v-if="item.register_env" >
							{{item.register_env.app_name}}
						</view>
					</uni-td>
					<!-- 平台 -->
					<uni-td align="center">
						<view class="" v-if="item.register_env"
							:style="`color:${item.register_env.uni_platform=='web'?'#5f006c':'#00711c'}`">
							{{isPlatform(item.register_env.uni_platform,item.register_env.app_name)}}
						</view>
					</uni-td>
					<uni-td align="center">
						{{item.register_env.client_ip}}
					</uni-td>
					<uni-td align="center">
						{{item.status==0?'账号无异常':'账号已注销'}}
					</uni-td>
					<uni-td align="center">
						v {{item.register_env.app_version}}
					</uni-td>
					<uni-td align="center">
						{{item.register_env.os_name}}
					</uni-td>
					<!-- 用户收货地址 -->
					<uni-td align="center">
						{{ getAddress(item._id,index)  }}
						{{item.address}}
					</uni-td>
					<uni-td align="center">
						<text>
							￥{{(item.money / 100).toFixed(2)}}
						</text>
					</uni-td>
					<!-- 时间 -->
					<uni-td align="center">
						<uni-dateformat :date="item.register_date?item.register_date:''"></uni-dateformat>
					</uni-td>
					<!-- 设置 -->
					<uni-td align="center">
						<button class="uni-button" size="mini" type="" @click="navigateTo('/pages/system/user/detail?id='+item._id,false)">
							详情
						</button>
						<button size="mini" @click="goUrl('/pages/notice/user/add?_uid='+item._id)"  class="uni-button" >
							发送通知
						</button>
					</uni-td>
				</uni-tr>
			</uni-table>

		</view>
		<view class="uni-pagination-box">
			<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title=""
				:total="total"></uni-pagination>
		</view>

	</view>
</template>

<script>
	import Util from "@/js_sdk/validator/util.js"
	const global = uniCloud.importObject("global")
	let dayDate;
	export default {
		data() {
			return {
				loading:true,
				routes: [{
						to: "/pages/index/index",
						name: "首页",
					},
					{
						to: "",
						name: "接待中心",
					},
					{
						to: "",
						name: "新用户统计",
					},
				],
				// 分页
				total: 0, //  总条数
				skip: 0, // 开始查询位置
				limit: 20, // 单词查询条数
				currentPage: 1, // 当前页
				//搜索框
				searchVal: '',
				//a 日期下拉框
				selectTimeVal: 0,
				range: [{
						value: 0,
						text: "今天"
					},
					{
						value: 1,
						text: "昨天"
					},
					{
						value: 2,
						text: "最近一周"
					},
				],
				data: []
			}
		},
		onLoad() {
			dayDate = Util.getDayTimestamps(0) // 默认为今天
			this.getExamineData()
		},
		methods: {
			getExamineData() {
				const db = uniCloud.database()
				db.collection("uni-id-users")
					.where(`register_date> ${dayDate.startTime} && register_date < ${dayDate.endTime} `)
					.field("avatar,username,register_date,money,nickname,register_env,mobile,status,_id").orderBy("register_date desc")
				.skip(this.skip).limit(this.limit).get({
						getOne: false,
						getCount: true,
				}).then(res => {
					// console.log(res.result)
					this.data = res.result.data
					this.total = res.result.count
					this.loading = false
				})
			},
			//
			getAddress(ID, index) {
				const db = uniCloud.database()
				db.collection("users_address").where({
					user_id: ID
				}).field("_id,user_id,address,title").get({
					getOne: false
				}).then(result => {
					if (result.result.data.length != 0) {
						this.data[index].address = result.result.data[0].title
					} else {
						this.data[index].address = ''
					}
				})

			},
			// 分页
			enventFneye(val) {
				this.skip = (val.current - 1) * 20
				this.getExamineData()
			},
			// 放大图片
			eventImage(image){
				uni.previewImage({
					urls:[image]
				})
			},
			// 下拉框
			changeDateSelect(e) {
				if (e < 2) {
					dayDate = Util.getDayTimestamps(e)
				} else {
					dayDate = this.getStartAndEndTimestamp()
				}
				this.skip = 0
				this.currentPage = 1
				this.getExamineData()
			},
			// 搜索
			eventSearch() {
				// console.log(this.searchVal);
				// 合并查询条件
				global.getDataList("uni-id-users", {
						_id: this.searchVal
					}, "register_date desc", "_id,avatar,register_date,nickname,register_env,mobile,status", this.skip, this
					.limit
				).then(res => {
					// console.log(res);
					this.data = res.data
					this.total = res.count
				})
			},
			/**
			 * 获取指定日期的开始和结束时间戳
			 * @returns {Object} - 返回包含开始时间戳和结束时间戳的对象
			 */
			getStartAndEndTimestamp() {
				const date = new Date();
				const sevenDaysAgo = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000);
				const startTime = sevenDaysAgo.setHours(0, 0, 0, 0); // 将指定日期设置为零点，返回开始时间戳
				const endTime = date.setHours(23, 59, 59, 999); // 将指定日期设置为当天的结束，返回结束时间戳
				return {
					startTime: startTime,
					endTime: endTime
				};
			},
			// 验证 登录平台
			isPlatform(platform,appname){
				return Util.isPlatform(platform,appname)
			},
			navigateTo(url, clear) {
				// clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							this.loadData(clear)
						}
					}
				})
			},
			goUrl(Url) {
				uni.navigateTo({
					url: Url
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.select {
		width: 500rpx;
		margin: 0 20rpx;
	}

	.pagetitle {
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.right {
			display: flex;
		}
	}

	.warn {
		padding: 10rpx;
	}

	.item {
		padding: 10rpx;
		margin: 0rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.items {
			flex: 1;
			text-align: center;
		}
	}

	.title {
		font-size: 16px;
		font-weight: bold;
	}

	.table {
		margin: 50rpx 20rpx;
		border: 1px solid #eee;
		border-bottom: none
	}

	.wdthdrawal {
		padding: 20rpx;
		font-size: 14px;
	}
	.uni-button{
		margin:0 5px
	}
</style>